import React, { useContext } from 'react';
import { EditorContext } from '../../index';
import { StoreActionType } from '../../store/module';
import { DeleteSvg } from '../../assets/icon';
import StyleModule from './index.module.less';
import { Tooltip } from 'antd';
import { TooltipConfig } from '../../config';

const ModuleOption = () => {
  const { storeState, dispatch } = useContext(EditorContext);
  // 获取当前的module根据zIndex排序的id集合

  const { selectModuleDataIds = [] } = storeState;

  function deleteModule() {
    // 再删除所有选中组件
    dispatch({
      type: StoreActionType.DeleteModuleDataList,
      payload: {
        moduleDataIds: selectModuleDataIds,
      },
    });
  }

  return (
    <div
      className={StyleModule['module-option']}
      style={{ display: selectModuleDataIds?.length ? 'flex' : 'none' }}
    >
      <Tooltip title="删除" placement="right" {...TooltipConfig}>
        <div
          onMouseDown={(e) => {
            e.stopPropagation();
            e.nativeEvent.stopPropagation();
            deleteModule();
          }}
        >
          <DeleteSvg />
        </div>
      </Tooltip>
    </div>
  );
};

export default React.memo(ModuleOption);
